<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--自定义big指令，让其值放大十倍-->
<!--自定义v-fbind指令，功能和bind类似，但让其绑定的input元素默认获取焦点-->
<!--指令命名 多个单次用 - 分隔-->
<div id="root">
  <h2>当前n只是{{n}}</h2>
  <h2>放大10倍后的n值：<span v-big="n"></span></h2>
  <button @click="n++">点我n+1</button>
  <input type="text" v-fbind:value="n">
</div>
<script>
  //全局
  // Vue.directive("fbind",{
  //   //指令与元素绑定时
  //   bind(element, banding) {
  //     element.value = banding.value;
  //   },
  //   //指令所在元素被插入页面时
  //   inserted(element, banding) {
  //     element.focus();//获取焦点
  //   },
  //   //指令所在模板被重新解析时
  //   update(element, banding) {
  //     element.value = banding.value;
  //     element.focus();
  //   },
  // });
  new Vue({
    el: "#root",
    data() {
      return {
        n: '1',
      }
    },
    directives: {
      // 传入span标签和n值   指令调用时机：初次绑定时和所在模板解析时
      big(element, banding) {
        element.innerText = banding.value * 10;
      },
      fbind: {
        //指令与元素绑定时
        bind(element, banding) {
          element.value = banding.value;
        },
        //指令所在元素被插入页面时
        inserted(element, banding) {
          element.focus();//获取焦点
        },
        //指令所在模板被重新解析时
        update(element, banding) {
          element.value = banding.value;
          element.focus();
        },
      }
    }
  });
</script>

</body>
</html>
